import { Component, createContext } from "react";

// const data=createContext()
// console.log(data);
/**
 * 通过context实现跨级组件通讯(依赖注入)
 * 使用createContext()
 * Provider 提供共享数据
 * <Provider value={this.state.count}></Provider>
 * Consumer 接收共享数据
 *   <Consumer>
          {(data)=>{
            console.log('爷',data);
            return <h3>{data}</h3>
          }}
        </Consumer>
 */
const {Provider,Consumer}=createContext()


function GrandSon() {
  const num =Math.floor(Math.random()*10)

  // 接收数据方法
  const getData=({count,add})=>{
    console.log('爷',count);
    return (
      <>
    <p>{count}</p>
    <button onClick={()=>add(num)}>btn</button>
    </>
    )
  }
  return(
    <div>
      <h2>孙</h2>
      <hr />
      <div>
        <Consumer>
          {getData}
        </Consumer>
      </div>
    </div>
  )
}

function Son() {
  return(
    <div>
      <h2>子</h2>
      <hr />
      <GrandSon/>
    </div>
  )
}

class App extends Component{
  state={
    count:10,
    obj:{
      text:'123',
      num:456
    }
  }
  add=(num)=>{
    this.setState({
      count:num
    })
    // console.log(123);
  }
  render(){
    return(
      <Provider value={{count:this.state.count,add:this.add}}>
      <div>
        <h1>父</h1>
        <hr />
        <Son/>
      </div>
      </Provider>
    )
  }
}

export default App